import React, { useEffect } from "react";
import { Flex, Radio, Pagination } from "antd";
import { ViewGridCard, TableFile } from "@icon-park/react";
import { ChangeShowMovieType } from "@/types/changeShowMovie";

import "./index.less";

interface OperateHeaderProps {
  total?: number;
  pageNum?: number;
  pageSize?: number;
  setPageNum?: (pageNum: number) => void;
  setPageSize?: (pageSize: number) => void;
  currentShowType?: ChangeShowMovieType;
  setCurrentShowType?: (currentShowType: ChangeShowMovieType) => void;
  resetPageData?: () => void;
}

/**
 * 业务操作头部组件
 * 用于页面顶部的操作栏，包含标题、描述、搜索、筛选、创建、导入导出等功能
 */
const OperateHeader: React.FC<OperateHeaderProps> = ({
  setCurrentShowType,
  currentShowType,
  total,
  pageNum,
  pageSize,
  setPageNum,
  resetPageData,
  setPageSize,
}) => {
  useEffect(() => {
    // 重置分页
    resetPageData();
  }, [currentShowType]);
  return (
    <div className="flex items-center justify-between" id="operateHeader">
      {/* 操作区域 */}
      <div className="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between">
        {/* 操作按钮区域 */}
        <Flex vertical gap="middle">
          <Radio.Group
            onChange={(event) => {
              setCurrentShowType(event.target.value as ChangeShowMovieType);
            }}
            defaultValue={currentShowType}
          >
            <Radio.Button value="TableFile">
              <TableFile theme="outline" size="12" className="mr-2" />
              <span>列表模式</span>
            </Radio.Button>
            <Radio.Button value="ViewGridCard">
              <ViewGridCard theme="outline" size="12" className="mr-2" />
              <span>卡片模式</span>
            </Radio.Button>
          </Radio.Group>
        </Flex>
      </div>
      <div>
        <Pagination
          pageSize={pageSize}
          current={pageNum}
          total={total}
          showTotal={(total) => `总共 ${total} 部电影`}
          onChange={(pageNum, pageSize) => {
            setPageNum(pageNum);
            setPageSize(pageSize);
          }}
          pageSizeOptions={
            currentShowType === ChangeShowMovieType.TableFile
              ? [10, 20, 30, 40, 50]
              : [10, 15,20]
          }
          showSizeChanger
        />
      </div>
    </div>
  );
};

export default OperateHeader;
